<template>
  <div class="cloud-circle-page">

    <!-- 云圈分类标签 -->
    <div class="circle-tabs">
      <div 
        class="tab-item" 
        v-for="(tab, index) in circleTabs" 
        :key="index"
        @click="activeTab = index"
      >
        <img :src="tab.icon" alt="tab-icon" class="tab-icon" />
        <p :class="{ active: activeTab === index }">{{ tab.text }}</p>
      </div>
    </div>

    <!-- 云村信息卡片 -->
    <van-card 
      class="circle-info-card"
      :title="circleInfo.title"
      :desc="circleInfo.desc"
      :thumb="circleInfo.thumb"
    >
     <template #tags>
  <van-tag plain type="info" style="color: peru;">{{ circleInfo.online }}人在线</van-tag>
  <van-button  round type="primary" size="small">邀请好友</van-button>
</template>
    </van-card>

    <!-- 内容标签栏 -->
    <van-tabs v-model:active="activeContentTab" class="content-tabs">
      <van-tab title="群聊">
        <div class="discussion-list">
      <div 
        class="discussion-item" 
        v-for="(item, index) in discussionList" 
        :key="index"
      >
        <van-avatar group :size="32">
          <van-avatar 
            v-for="(avatar, idx) in item.avatars" 
            :key="idx" 
            :src="avatar" 
            :size="28"
          />
        </van-avatar>
        <div class="discussion-info">
          <p class="discussion-title">
            {{ item.title }} 
            <van-tag 
              v-if="item.commentCount" 
              plain 
              type="info" 
              size="small"
            >
              {{ item.commentCount }}
            </van-tag>
          </p>
          <p class="discussion-desc">{{ item.desc }}</p>
        </div>
      </div>
    </div>
        </van-tab>
      <van-tab title="圈内动态">
        <div class="dynamic-list">
          <div 
            class="dynamic-item" 
            v-for="(item, index) in dynamicList" 
            :key="index"
          >
            <van-avatar :src="item.avatar" size="40" />
            <div class="dynamic-info">
              <div class="dynamic-header">
                <span class="dynamic-username">{{ item.username }}</span>
                <span class="dynamic-time">{{ item.time }}</span>
              </div>
              <p class="dynamic-content">{{ item.content }}</p>
              <div class="dynamic-interact">
                <van-icon 
                  name="like-o" 
                  size="16" 
                  @click="toggleLike(item)"
                  :color="item.liked ? 'red' : '#999'"
                />
                <span class="like-count">{{ item.likeCount }}</span>
                <van-icon 
                  name="comment-o" 
                  size="16" 
                  class="ml-4"
                  @click="showComment = !showComment"
                />
                <span class="comment-count ml-1">{{ item.commentCount }}</span>
                <div class="comment-box" v-if="showComment">
                  <div 
                    class="comment-item" 
                    v-for="(comment, cIndex) in item.comments" 
                    :key="cIndex"
                  >
                    <span class="comment-username">{{ comment.username }}：</span>
                    <span>{{ comment.content }}</span>
                  </div>
                  <van-field 
                    v-model="item.newComment" 
                    placeholder="说点什么..." 
                    class="comment-input"
                    @keyup.enter="addComment(item)"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="匿名信箱">
        <div class="letter-list">
          <div 
            class="letter-item" 
            v-for="(letter, index) in letterList" 
            :key="index"
          >
            <div class="letter-header">
              <span class="letter-title">{{ letter.title }}</span>
              <span class="letter-time">{{ letter.time }}</span>
            </div>
            <p class="letter-content">{{ letter.content }}</p>
            <div class="letter-reply" v-if="letter.reply">
              <p class="reply-label">回复：</p>
              <p class="reply-content">{{ letter.reply }}</p>
            </div>
            <van-field 
              v-model="letter.newReply" 
              placeholder="写点回复..." 
              class="reply-input"
              @keyup.enter="addReply(letter)"
              v-if="!letter.reply"
            />
          </div>
        </div>
      </van-tab>
    </van-tabs>


  <!--圈内动态列表 -->
  <div class="circle-list">
      <div 
        class="circle-item" 
        v-for="(item, index) in circleList" 
        :key="index"
      >
        <van-avatar group :size="32">
          <van-avatar 
            v-for="(avatar, idx) in item.avatars" 
            :key="idx" 
            :src="avatar" 
            :size="28"
          />
        </van-avatar>
        <div class="circle-info">
          <p class="circle-title">
            {{ item.title }} 
            <van-tag 
              v-if="item.commentCount" 
              plain 
              type="info" 
              size="small"
            >
              {{ item.commentCount }}
            </van-tag>
          </p>
          <p class="circle-desc">{{ item.desc }}</p>
        </div>
      </div>
    </div>

    <!-- 底部播放栏 -->
    <div class="player-bar">
      <van-avatar :src="playerInfo.avatar" size="36" />
      <div class="player-text">
        <p class="song-name">{{ playerInfo.song }}</p>
        <p class="singer">{{ playerInfo.singer }}</p>
      </div>
      <van-icon name="pause-circle-o" size="24" @click="togglePlay" />
      <van-icon name="reorder" size="24" />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { Swipe, SwipeItem, Button, Icon } from 'vant/es';
import 'vant/es/swipe/style';
import 'vant/es/swipe-item/style';
import 'vant/es/button/style';
import 'vant/es/icon/style';

const currentTab = ref('discover');
const circleTabs = ref([
  { icon: 'https://img2.voc.com.cn/2022/11/19/2d51865aee96234f04ad188f2fa97e842d8622af1668852687.jpg', text: '广场' },
  { icon: 'https://img.keaitupian.cn/newupload/12/1671790142938529.jpg', text: '冷静的鱼' },
  { icon: 'https://ts1.tc.mm.bing.net/th/id/R-C.b1e235de4673a01064c88b34f6c179e3?rik=hsNcrJVkz0uLBg&riu=http%3a%2f%2fsafe-img.xhscdn.com%2fbw1%2ff03095f7-19c8-4150-909d-1db4a28fc77b%3fimageView2%2f2%2fw%2f1080%2fformat%2fjpg&ehk=DKxI7Jq0DFoqH2GWljwfz0DiYxVHwfQqRl22tZVjtrI%3d&risl=&pid=ImgRaw&r=0', text: '房东的猫' },
  { icon: 'https://picx.zhimg.com/v2-6ca9e1a5c977ad26a53fcc11a7ba9f57_720w.jpg?source=172ae18b', text: '蒸汽波' },
  { icon: 'https://picsum.photos/40?random=4', text: '蒸汽波' },
]);
const activeTab = ref(0);

const circleInfo = ref({
  title: '云村解忧杂货铺',
  desc: '117万颗浏览值',
  online: '5741',
  thumb: 'https://tse2-mm.cn.bing.net/th?id=OIF-C.7oOA%2bL1HqzGkzczGSSwTKA&rs=1&pid=ImgDetMain&o=7&rm=3'
});


const discussionList = ref([
  {
    avatars: ['https://picsum.photos/30?random=7', 'https://picsum.photos/30?random=8'],
    title: '解忧音乐安利刀',
    commentCount: 64,
    desc: '王科学Dr: 是今晚发新歌吗，好期待哦'
  },
  {
    avatars: ['https://picsum.photos/30?random=9', 'https://picsum.photos/30?random=10'],
    title: '说出自己的小秘密',
    commentCount: 32,
    desc: '森山: 好久不见'
  },
  {
    avatars: ['https://picsum.photos/30?random=11', 'https://picsum.photos/30?random=12'],
    title: '暗恋这件小事',
    commentCount: '',
    desc: '是你的点_本人: 正好能看见萤火虫'
  },
  {
    avatars: ['https://picsum.photos/30?random=13', 'https://picsum.photos/30?random=14'],
    title: '终于等到你',
    commentCount: '',
    desc: '一块苏皮糖: 这不得多听几遍么?'
  }
]);
const dynamicList = ref([
  {
    avatar: 'https://picsum.photos/30?random=7',
    username: '音乐旅人小A',
    time: '4分钟前',
    content: '发现一首超治愈的民谣《岁月慢歌》，循环听了一下午～',
    likeCount: 40,
    liked: false,
    commentCount: 19,
    comments: [
      { username: '云村听众B', content: '这首歌真的很适合傍晚听～' },
      { username: '音乐爱好者C', content: '求歌单！' },
    ],
    newComment: ''
  },
  {
    avatar: 'https://picsum.photos/30?random=8',
    username: '独立音乐人阿明',
    time: '5小时前',
    content: '新创作的歌曲《城市微光》上线啦~~，欢迎大家去倾听并给出中肯的建议～',
    likeCount: 100,
    liked: false,
    commentCount: 40,
    comments: [
      { username: '粉丝小D', content: '好听！支持原创！' },
      { username: '音乐评论家E', content: '旋律很抓耳，歌词也有深度～' },
    ],
    newComment: ''
  },
  {
    avatar: 'https://picsum.photos/30?random=9',
    username: '云村树洞',
    time: '昨天',
    content: '你有没有因为一首歌想起某个人？',
    likeCount: 125,
    liked: false,
    commentCount: 56,
    comments: [
      { username: '用户F', content: '《匆匆那年》让我想起了高中同桌～' },
      { username: '用户G', content: '《后来》每次听都想起初恋...' },
    ],
    newComment: ''
  }
]);

// 匿名信箱数据
const letterList = ref([
  {
    title: '给陌生人的一封信',
    time: '3天前',
    content: '最近压力山大。。有人能分享一些治愈歌单吗～',
    reply: '',
    newReply: ''
  },
  {
    title: '关于青春的遗憾',
    time: '1周前',
    content: '高中时错过的人，现在听到《那些年》还是会难过...',
    reply: '过去的遗憾也是成长的礼物，听听《如烟》或许会有新感悟～',
    newReply: ''
  },
  {
    title: '求歌！',
    time: '2周前',
    content: '想要一些适合跑步听的节奏感强的歌，大家有推荐吗？',
    reply: '推荐《Uptown Funk》《Level Up》，跑起来超带感！',
    newReply: ''
  }
]);

const playerInfo = ref({
  avatar: 'https://picsum.photos/40?random=15',
  song: '东北民谣',
  singer: '毛不易'
});

const goBack = () => {
  // 返回逻辑，如路由跳转
  console.log('返回上一级');
};

const handleSearch = () => {
  console.log('点击搜索');
};

const togglePlay = () => {
  console.log('切换播放状态');
};
</script>

<style scoped>
.cloud-circle-page {
  background-color: #fff;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/* 顶部导航 */
.top-nav {
  display: flex;
  justify-content: space-around;
  width: 100%;
}
.nav-item {
  color: #333;
  font-size: 14px;
  padding: 0 8px;
}
.nav-item.active {
  color: #c20c0c;
  border-bottom: 2px solid #c20c0c;
}

/* 云圈分类标签 */
.circle-tabs {
  display: flex;
  padding: 12px 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.circle-tabs::-webkit-scrollbar {
  display: none;
}
.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 8px;
  min-width: 60px;
}
.tab-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
}
.tab-item p {
  font-size: 12px;
  margin-top: 4px;
  color: #666;
}
.tab-item p.active {
  color: #c20c0c;
}

/* 云圈信息卡片 */
.circle-info-card {
  margin: 0 12px;
  border-radius: 12px;
}

/* 内容标签栏 */
.content-tabs {
  margin: 12px;
}

/* 讨论群列表 */
.discussion-list {
  padding: 12px;
  background-color: #f8f8f8;
  border-radius: 12px;
  margin: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.discussion-item {
  display: flex;
  align-items: center;
  padding: 12px;
  margin-bottom: 8px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  transition: all 0.2s ease;
  cursor: pointer;
}

.discussion-item:last-child {
  margin-bottom: 0;
}

.discussion-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
}

.discussion-item.active {
  background-color: #f7f7f7;
}

.discussion-info {
  flex: 1;
  margin: 0 12px;
  overflow: hidden;
}

.discussion-title {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}

.discussion-desc {
  font-size: 12px;
  color: #777;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 圈内动态 */
.dynamic-list {
  margin: 0 12px;
}
.dynamic-item {
  display: flex;
  padding: 12px 0;
  border-bottom: 1px solid #f5f5f5;
}
.dynamic-info {
  margin-left: 8px;
  flex: 1;
}
.dynamic-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.dynamic-username {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}
.dynamic-time {
  font-size: 12px;
  color: #999;
}
.dynamic-content {
  font-size: 13px;
  color: #555;
  margin-bottom: 8px;
  line-height: 1.5;
}
.dynamic-interact {
  display: flex;
  align-items: center;
  color: #999;
  font-size: 12px;
}
.like-count, .comment-count {
  margin: 0 4px;
}
.comment-box {
  margin-top: 8px;
  padding: 8px;
  background-color: #f9f9f9;
  border-radius: 8px;
}
.comment-item {
  margin-bottom: 4px;
  font-size: 12px;
  color: #666;
}
.comment-username {
  font-weight: 500;
}
.comment-input {
  margin-top: 4px;
}

/* 匿名信箱 */
.letter-list {
  margin: 0 12px;
}
.letter-item {
  padding: 12px 0;
  border-bottom: 1px solid #f5f5f5;
}
.letter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.letter-title {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}
.letter-time {
  font-size: 12px;
  color: #999;
}
.letter-content {
  font-size: 13px;
  color: #555;
  margin-bottom: 8px;
  line-height: 1.5;
}
.letter-reply {
  margin-top: 8px;
  padding: 8px;
  background-color: #f9f9f9;
  border-radius: 8px;
}
.reply-label {
  font-weight: 500;
  margin-bottom: 4px;
}
.reply-content {
  font-size: 12px;
  color: #666;
}
.reply-input {
  margin-top: 8px;
}
/* 底部播放栏 */
.player-bar {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  background-color: #f8f8f8;
  border-top: 1px solid #eee;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}
.player-text {
  margin: 0 12px;
}
.song-name {
  font-size: 14px;
  color: #333;
}
.singer {
  font-size: 12px;
  color: #999;
}
</style>